<template>
  <el-form ref="userJobStateForm" :model="userJobStatus" :rules="userJobStatusRules" label-width="120px"
    class="demo-ruleForm" size="default" status-icon>
    <p style="font-size: 24px;
    margin-bottom: 30px;
    padding-top: 10px;
    padding-left: 20px;">求职状态</p>
    <el-form-item label="求职状态" style="width: 400px; margin-bottom: 50px;" prop="userJobState">
      <el-select v-model="userJobStatus.userJobState" placeholder="请选择">
        <el-option v-for="item in jobStatus" :key="item.value" :label="item.label" :value="item.value" />
      </el-select>
    </el-form-item>

    <el-form-item>
      <el-button type="success" @click="saveInfo(userJobStateForm)">保存</el-button>
      <el-button @click="cancelEdit(userJobStateForm)">取消</el-button>
    </el-form-item>
  </el-form>


</template>

<script lang="ts" setup>
import { ref, onMounted,getCurrentInstance,reactive } from 'vue'
import { jobStatus } from "@/utills/data"
import { useStore } from "vuex"
import type { FormInstance } from 'element-plus'
import { userJobStatus, userJobStatusRules } from "@/utills/userInfoValidators"
import { elmessage,data } from "@/hook/hook"
import { useRouter } from "vue-router"
const router = useRouter()
const store = useStore()
const userJobStateForm = ref<FormInstance>()
// @ts-ignore
const { proxy } = getCurrentInstance() // 1.获取proxy实例

onMounted(() => {


  userJobStatus.userJobState = store.state.userState.userJobState
})


// 提交按钮
const saveInfo = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      // 把编辑表单关闭
      store.commit("editJobState")
      // 把编辑后的结果送到vuex仓库
      store.commit("upJobState", userJobStatus.userJobState)
      // 将信息提交给后端
      const updata = {...data(), ...userJobStatus,...{upPart:"jobState"}}
      
      proxy.$api.userApi.upUserInfo(updata).then((res:any)=>{
        if (res.data["code"] = "200") {
          elmessage(res.data.message, res.data.type)
        } else if (res.data["code"] == "300") {
          elmessage(res.data["message"], res.data["type"])
          setTimeout(() => {
            router.replace("/login")
          }, 500);
          localStorage.clear()
        } else {
          console.log(res.data["message"]);

        }
        
       
        
      })
    } else {
      console.log('error submit!', fields)
    }
  })
}
// 取消按钮
function cancelEdit(formEl: FormInstance | undefined) {
  if (!formEl) return
  formEl.resetFields()
  store.commit("editJobState")
}

</script>

<style scoped>
.demo-ruleForm {
  height: 200px;
}

.demo-ruleForm:hover {
  transition-duration: 0.3s;
  transition-property: box-shadow;
  box-shadow: 0 0 3px #97999b;
  cursor: pointer;
}
</style>